<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>List of elements</h1>
<div id="one" class="element" data-value="1 uno">One</div>
<div id="two" class="element" data-value="2 duo">Two</div>
<div id="three" class="element" data-value="3 trio">Three</div>

<form action="/page_with_big_divs.html">
  <input id="i1" class="field">
  <input id="i2" class="field">
  <input id="i3" class="field" required>
  <input type="submit">
</form>

<h1 readonly="true">List of elements with spaces</h1>
<ol class="spaces">
  <li>The first</li>
  <li>The second</li>
  <li>The third</li>
</ol>

<h1 readonly="what's up?">List of elements with empty texts</h1>
<ol class="empty">
  <li>First</li>
  <li></li>
  <li>Third</li>
  <li></li>
</ol>
<script>
  // set "value" property
  document.getElementById('one').setAttribute('value', '11111')
  document.getElementById('two')['value'] = '22222'
  document.getElementById('three').value = '33333'

  // set "class" property
  document.getElementById('one').classList.add("first");
  document.getElementById('two').classList.add("middle");
  document.getElementById('three').classList.add("last");

  // set boolean property "required"
  document.getElementById('i1').required = true
  document.getElementById('i2')['required'] = true

  // set boolean property "readOnly"
  document.getElementById('i1').readOnly = true
  document.getElementById('i2').setAttribute("readonly", "readonly")
  document.getElementById('i3')['readOnly'] = true
</script>
</body>
</html>
